import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import "./less/Tabbar.less"
import home_1 from '../assets/tabbar/home_1.png'
import home_2 from '../assets/tabbar/home_2.png'
import fast from '../assets/tabbar/fast.png'
import my_1 from '../assets/tabbar/my_1.png'
import my_2 from '../assets/tabbar/my_2.png'
import { withRouter } from 'react-router-dom';


const useStyles = makeStyles({
  root: {
        width: '100%',
        position: "fixed",
        left: 0,
        bottom: 0
  },
});

// 函数式组件默认存在一个参数props
function Tabbar(props) {
  // tabbar当前项的初始值应该是随着路由变化的，而不是默认0
  let initValue = 0;
  const classes = useStyles();
  const [value, setValue] = React.useState(initValue);
  const [showTabbar, setShowTabbar] = React.useState("flex");

  // componentDidUpdate
  // useEffect(callback, Array)
  React.useEffect(() => {
    switch (props.history.location.pathname) {
      case "/home":
        setValue(0);
        setShowTabbar("flex")
        break;
      case "/fast":
        setValue(1);
        setShowTabbar("flex")
        break;
      case "/user":
        setValue(2);
        setShowTabbar("flex")
        break;
      default:
        setShowTabbar("none")
        break;
  }
  },[props.history.location.pathname])

  return (
    <BottomNavigation
      value={value}
          onChange={(event, newValue) => {
              switch (newValue) {
                  case 0:
                      // 跳转到/home
                      props.history.push("/home")
                      break;
                  case 1:
                        // 跳转到/fast
                        props.history.push("/fast")
                      break;
                  case 2:
                        // 跳转到/user
                        props.history.push("/user")
                      break;
                  default:
                      break;
            }
            setValue(newValue);
      }}
      showLabels
      className={classes.root}
      style={{display: showTabbar}}
    >
            <BottomNavigationAction label="首页" icon={<img className="home_logo" src={value === 0 ? home_1 : home_2} alt="" />} />
            <BottomNavigationAction label="快速刷题" icon={<img className="fast_logo" src={fast} alt="" />} />
            <BottomNavigationAction label="我的" icon={<img className="my_logo" src={value === 2 ? my_1 : my_2} alt="" />} />
        </BottomNavigation>
  );
}


export default withRouter(Tabbar)